<!doctype html>
<html>

<head>
  <link rel="shortcut icon" href="https://gw.alipayobjects.com/zos/rmsportal/wNkELvnLHXPAlmqutRPI.png"
    type="image/x-icon">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <link rel="stylesheet" type="text/css"
    href="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_antd-mini-lyra/1.0.1/web/lyra.css" />
  <link rel="preload" href="/preview.json" as="fetch" crossorigin>
</head>

<style>
  body {
    margin: 0;
    background-color: transparent;
  }
</style>

<body>

  <script>
    // When the iframe is just created, you need to set the background color according to the dark mode.
    window.addEventListener('message', (event)=>{
      if (event.data.type === 'setIsDarkMode') {
        window.LyraIsDefalutDarkMode = event.data.data;
        const element = document.getElementsByTagName('body')?.[0];
        if (element) {
          element.style.setProperty(
            'background-color',
            window.LyraIsDefalutDarkMode ? '#141414' : '#f9fafb'
          );
        }
      }
    })

  </script>

  <div id="root"></div>
  <script type="text/javascript"
    src="https://gw.alipayobjects.com/os/lib/react/18.0.0/umd/react.production.min.js"></script>
  <script type="text/javascript"
    src="https://gw.alipayobjects.com/os/lib/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
  <script src="https://gw.alipayobjects.com/render/p/yuyan_npm/@alipay_antd-mini-lyra/1.0.1/web/lyra.js"></script>
  <script>
    const searchParams = new URL(location.href).searchParams;
    const page = searchParams.get('page');
    const platform = searchParams.get('platform');
    const server = searchParams.get('compilerServer');


    function getDist() {
      const list = ['appConfig.json', 'index.js', 'index.worker.js', 'index.html'];
      return Promise.all(list.map(item => fetch(`${server}/${item}`).then(res => res.text()))).then(arr => {
        const dist = {};
        list.forEach((item, index) => {
          dist[item] = arr[index];
        });
        return dist;
      });
    }

    async function startWebOpenBoxLyraApp() {
      let dist;

      if (server) {
        dist = await getDist()
      } else {
        const obj = await fetch('/preview.json').then(res => res.json());
        dist = obj.dist;

      }
      window.OpenBoxLyra.StartWebOpenBoxLyraApp(
        {
          dist,
          enableAppxNg: true,
          maskThemeColor: {
            dark: '#141414',
            light: '#f9fafb',
          },
          defalutDarkMode: window.LyraIsDefalutDarkMode,
          lyraKey: 'unique-identifier-key',
          simulatorStyle: {
            width: 292,
            height: 633,
          },
          lyraConfig: {
            zoom: 0.75,
            layoutHeight: 'match_parent',
            layoutWidth: 'match_parent',
            defaultDeviceName: 'iPhone 13',
            initWithAutoZoom: false,
            transparentBackground: true,
            hideTopBar: true,
            hideBottomBar: true,
            enableDeviceSkin: false,
            hideTitleBar: true,
            liteMode: false,
            launchParams: { page: decodeURIComponent(page) }
          },
          onPageReady:() => {
            console.log('onPageReady,123');
            window.parent && window.parent.postMessage({ type:'onPageReady', data: true })
          },
          onAppReady:() => {
            window.parent && window.parent.postMessage({ type:'onAppReady', data: true })
          }
        },
      )

    }
    startWebOpenBoxLyraApp();
  </script>
</body>

</html>
